{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{% static 'css/global.css' %}">
    <link rel="stylesheet" href="{% static 'css/prediction.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}">

    <title>covid-19_2.0</title>
</head>

<body class="bg">
    <script src="{% static 'js/ZoomPic.js' %}"></script>
    <script>/*鼠标滚动导航栏特效*/
        window.addEventListener('scroll', function () {
            let top = document.querySelector('.top');
            if (window.scrollY > 0) {
                top.classList.add("bian");
            } else {
                top.classList.remove("bian");
            }
        })
    </script>
    <style>
        ul#bcty365_nav {
            padding-left: 50px;
            margin-bottom: 10px;
            border-bottom: 2px solid #ccc;
            overflow: hidden;
            _zoom: 1;
        }

        ul#bcty365_nav li {
            float: left;
            display: inline;
            margin: 10px;
        }

        ul#bcty365_nav li a {
            display: block;
            color: #000000;
            font-size: 16px;
        }

        ul#bcty365_nav li a,
        #wimoban_p,
        #wimoban_p a {
            font-family: "微软雅黑";
        }

        ul#bcty365_nav li a:hover,
        #wimoban_p a:hover {
            color: red;
        }
    </style>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        a,
        img {
            border: 0;
        }

        body {
            font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
        }

        .container {
            scroll-snap-type: y mandatory;
            height: 100vh;
            width: 100vw;
            overflow-x: hidden;
        }

        .section {
            width: 100vw;
            height: 100vh;
            scroll-snap-align: start;
            overflow: hidden;
        }
    </style>
    <header class="top clearfix">
        <ul class="top-nav clearfix">
            <li><a href="/index">首页<br>Home</a></li>
            <li><a href="/prediction">&nbsp;预测系统<br>Predictio</a></li>
            <li><a href="/news">&nbsp;&nbsp;新闻报道<br>News Report</a></li>
            <li><a href="/research">相关研究<br>Research</a></li>
            <li><a href="/prevention">预防措施<br>Prevent</a></li>
            <li><a href="/platform">关于平台<br>Platform</a></li>
            <li><a href="/contact">&nbsp;联系我们<br>Connect us</a></li>
        </ul>
    </header>
    <section>
        <div class="container">


            <div class="section">
                {% comment %} 实验部分 {% endcomment %}
                <div style="margin-left: auto; margin-right: auto; margin-top: 80px;">
                    <div>
                        <div style="margin: 0 20%; background-color: rgb(249,249,249);">
                            <div style="padding: 3% 3%;">
                                <p style="font-size: 15px;">
                                    首先生成一张带有1000个节点的、平均度为4的BA无标度网络。再利用图神经网络库PyG和科学计算库SciPy进行ABM仿真，得到1000天的流行病变化趋势。然后使用模拟流行病数据训练神经网络模型，在这里，我们搭建了Att-GNN模型，它借鉴了GAT模型，输入是整张图的状态信息，输出是每个节点的转移概率。
                                </p>
                                <p style="font-size: 15px;">
                                    我们使用随机动力学模型进行仿真，因此每个节点下一时刻的状态都是不确定的，只能用概率衡量。
                                </p>
                                <p style="font-size: 15px;">
                                    使用刚刚训练好的模型预测节点的转移概率，图中横坐标代表节点感染邻居数，纵坐标代表转移概率，橙色曲线是节点真实的转移概率，蓝色曲线是GNN模型预测的转移概率，可以看出两条曲线十分接近，这证明了GNN成功学习了暗藏于数据下的动力学模型
                                </p>
                            </div>

                        </div>
                    </div>
                    <div class="clearfix"
                        style="margin-top: 10px; padding-top: 15px; margin-left: 30vw; margin-right: 30vw; display: flex;">
                        <div class="col-xs-4" style="margin-left: auto; margin-right: auto;">
                            <button id="runfig" type="button" class="btn btn-info" style="width: 100%; height: 40px;"><b
                                    style="font-size: 20px;">开始实验</b></button>
                        </div>
                    </div>

                    <div class="clearfix"
                        style="margin-top: 10px; padding-top: 10px; padding-bottom: 15px; display: flex;">
                        <div id="div_fig" class="col-xs-3" style="margin: 0 auto; width: 430px"></div>
                    </div>

                </div>
                {% comment %} 实验部分 {% endcomment %}


            </div>
            <div class="section">
                <div style="margin-left: auto; margin-right: auto; margin-top: 80px;">
                    <div>
                        <div style="margin: 0 20%; background-color: rgb(249,249,249);">
                            <div style="padding: 3% 3%;">
                                <p style="font-size: 15px;">
                                    此时，将用于模型训练的BA网络替换为未知的ER网络，将SIS型的传播动力学模型替换为训练好的GNN模型，如果模型真的学到了隐藏的动力学过程，就应该能够复现疾病的传播模式。
                                </p>
                                <p style="font-size: 15px;">
                                    图片展示了训练好的GNN模型在未知网络上对疾病流行程度的预测。横坐标为节点平均度，纵坐标为模拟流行病的流行程度，可以看出，橙色的预测结果十分接近蓝色的真实情况。
                                </p>
                            </div>

                        </div>
                    </div>
                    <div class="clearfix"
                        style="margin-top: 10px; padding-top: 15px;margin-left: 30vw; margin-right: 30vw; display: flex;">
                        <div class="col-xs-4" style="margin-left: auto; margin-right: auto;">
                            <button id="runer" type="button" class="btn btn-info" style="width: 100%; height: 40px;"><b
                                    style="font-size: 20px;">开始实验</b></button>
                        </div>
                    </div>
                    <div class="clearfix"
                        style="margin-top: 10px; padding-top: 10px; padding-bottom: 15px; display:flex;">
                        <div id="div_er" class="col-xs-3" style="margin:0 auto; width:430px"></div>
                    </div>
                </div>
            </div>
            <div class="section">
                <div style="margin-left: auto; margin-right: auto; margin-top: 80px;">
                    <div>
                        <div style="margin: 0 20%; background-color: rgb(249,249,249);">
                            <div style="padding: 3% 3%;">
                                <p style="font-size: 15px;">
                                    如果未知网络是BA无标度网络，或者是带聚类系数的网络，图中的结果都表明GNN能够完美复现疾病的爆发情况，这证明了它在预测流行病方的巨大潜力。
                                </p>
                            </div>

                        </div>
                    </div>
                    <div class="clearfix"
                        style="margin-top: 10px; padding-top: 15px;margin-left: 30vw; margin-right: 30vw; display: flex;">
                        <div class="col-xs-4" style="margin-left: auto; margin-right: auto;">
                            <button id="runba" type="button" class="btn btn-info" style="width: 100%; height: 40px;"><b
                                    style="font-size: 20px;">开始实验</b></button>
                        </div>
                    </div>
                    <div class="clearfix" style="margin-top: 10px; padding-top: 10px; padding-bottom: 15px;">
                        <div id="div_ba1" class="col-xs-3"></div>
                        <div id="div_ba2" class="col-xs-3"></div>
                    </div>
                </div>
            </div>

        </div>

    </section>


    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>

    {% comment %} 实验部分 {% endcomment %}
    <script type="text/javascript">
        $(function () {
            bindBtnRunER();
            bindBtnRunBA();
            bindBtnRunFIG();
        })

        function bindBtnRunER() {
            $("#runer").click(function () {
                $.ajax({
                    url: '/exp/runer/',
                    type: 'post',
                    success: function (res) {
                        var img = '<img src="' + String(res) + '" style="width: 400px; height: 260px; margin: 10px 0px;" />'
                        $("#div_er").append(img)
                    }
                });
            })
        }
        function bindBtnRunBA() {
            $("#runba").click(function () {
                $.ajax({
                    url: '/exp/runba/',
                    type: 'post',
                    success: function (res) {
                        var img1 = '<img src="' + String(res[0]) + '" style="width: 100%; height: 300px; margin: 10px 0px;" />'
                        var img2 = '<img src="' + String(res[1]) + '" style="width: 100%; height: 300px; margin: 10px 0px;" />'
                        $("#div_ba1").append(img1)
                        $("#div_ba2").append(img2)
                    }
                });
            })
        }
        function bindBtnRunFIG() {
            $("#runfig").click(function () {
                $.ajax({
                    url: '/exp/runfig/',
                    type: 'post',
                    success: function (res) {
                        var img = '<img src="' + String(res) + '" style="width: 400px; height: 260px; margin: 10px 0px;" />'
                        $("#div_fig").append(img)
                    }
                });
            })
        }
    </script>
    {% comment %} 实验部分 {% endcomment %}

</body>

</html>